Description

The SVG icon (arrow right) was not aligned correctly with the masthead notice text when the screen size became smaller than 576px because the class d-sm-inline-flex is used, which removes the display: inline-flex; when the screen size is below 576px. But this needed to be removed because when the masthead notice breaks to a new line, the entire element looks weird. Therefore, I came with a slightly different solution that resolved the issue.

Before:
Screen size ≥576px

Screen size <576px

After:
Screen size ≥576px

Screen size <576px

Motivation & Context

1. The align-items-center and gap-1 classes only worked when the d-sm-inline-flex class was active. When the screen size is smaller than 576px, d-sm-inline-flex class is removed, which leaves unused styles in the file and makes it bigger for no reason. The new solution avoids this.
2. Keeps the arrow icon and text aligned, no matter the screen size or if the text wraps onto a new line.
3. It's always good to try to make everything look its best on all different screens.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-40897--twbs-bootstrap.netlify.app/

Related issues